<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用文本属性_行高</title>
</head>
<style>
    /*
    属性名:line-height
    作用:控制一行文字的高度
    可选值:
        1.normal:由浏览器根据文字大小决定的一个默认值
        2.像素(px)
        3.数字:参考自身font-size的倍数
        4.百分比:参考自身font-size的百分比

    注意事项:
    line-height过小会怎么样,--文字产生重叠,最小值是0,不能写负数
    line-height是可以继承的,且为了能够更好的呈现文字,最好写数值
    line-height和height是什么关系
        如果同时设置了两者,那么高度就是height
        如果不设置height,那么就会根据line-height计算高度


    应用场景:
        1.对于多行文字,控制行与行之间的距离
        2.对于单行文字:让height等于line-line-height可以实现文字垂直居中
    */
    .one{
        line-height: normal;
    }
    .two{
        line-height: 100px;
    }
    .three{
        line-height: 3;
    }
    .four{
        line-height: 300%;
    }
    .test{
        height: 1000px;
        line-height: 1000px;
    }
</style>
<body>
<div class="one">使用normal设置行高</div>
<div class="two">使用像素设置行高</div>
<div class="three">使用数字设置行高</div>
<div class="four">使用百分比设置行高</div>
<div class="test">这是测试</div>
</body>
</html>